Beyond Blue Links: Making Clickable Elements Recognizable讓點選元素更易識別

無論是否採用扁平化設計風格，互動元件必須保留足夠的提示以顯示其可點選性。透過使用邊框、顏色、大小、一致性、佈局及遵循網路標準等提示，可以讓互動元件具有正確的外觀。

使用者瀏覽網頁的目的是為了完成任務，每一次點選都很重要。因此，使用者需要明確哪些頁面區域是靜態內容，哪些是可點選的區域。讓可點選的元素對使用者顯而易見，避免設計帶來的困惑和意外。

“點選成本”（Interaction Cost）是關鍵：人們將點選視為一種“貨幣”，不願輕易浪費。他們會對需要不斷尋找點選項的設計感到不滿，更不會忍受點選無效的情況。

關鍵點 Key Points

1. 減少點選不確定性 Reduce Click Uncertainty

不要讓使用者透過反覆嘗試或“擦屏”（用滑鼠反覆掃過螢幕）來確定哪些文字是可點選的。以下是一些設計上的基本建議：

• 確保連結的外觀在視覺上清晰可見，易於辨認。

• 靜態元素的顏色不要與超連結相同，也不要使用藍色文字或下劃線樣式用於不可點選的內容。

• 統一網站中超連結的外觀處理方式，保持一致性。

Tom’s of Maine：該頁面許多區域看似可點選，實際只有少量綠色標註的區域可點選，這會給使用者帶來很大的失望。

2. 文字連結 Text Links

• 藍色仍是最安全的連結顏色，但其他顏色也可以，只要它們能明顯區別於正文。

• 在導航選單和頁面外圍區域的列表中，連結通常不需要下劃線，因為位置已經提示其可點選性。

• 為確保色盲使用者也能清楚識別，測試連結顏色的效果。

Patient Safety and Quality Healthcare：藍色標題看似可點選，實際不可點選，而圖片卻可點選但沒有明顯提示。

Starbucks：在一個頁面中統一使用綠色連結，並透過佈局引導使用者輕鬆識別。

3. 按鈕 Buttons

• 按鈕應該至少具有一些物理按鈕的特性，例如矩形形狀（最好有圓角），即使沒有3D效果也應讓人直觀地識別為按鈕。

• 避免非按鈕元素（如標題）設計得像按鈕。

• 注意內容層級結構，避免頁面上出現過多大小不同的彩色框，以免讓使用者難以辨認哪些是可點選的。

TaskRabbit：清晰的邊框和一致的按鈕設計讓使用者容易識別點選區域。

Menagerie Climb：橙色框看起來像按鈕，但實際上不可點選，這是一種設計失敗。

GNC：按部門和工具與資源進行購物，看起來像按鈕而不是類別標題。

4. 圖片和圖形 Images and Graphics

• 小圖片應在點選時放大。

• 圖片、圖示和文字等關聯元素應整體可點選，這能擴大目標區域，提高點選的成功率。

• 避免在一個圖片內提供多個不同的行動選項，除非這些選項透過列表或按鈕清晰展示。

Trader Joe’s：圖示在“公告”列表下有效提示點選，但在其他地方卻引起混淆，導致使用者難以判斷點選區域。

5. 符號和圖示 Symbols and Icons

• 圖示用作連結時，應易於識別。如果圖示的可點選性不夠明確，應結合文字標籤提供額外提示。

• 箭頭圖示雖能在一定程度上提示可點選性，但不建議過多使用，因為它們不夠直觀且容易被忽略。

案例分析：CNN：箭頭圖示在平面設計中增強了黑色框的可點選性，但效果仍不如傳統設計。

透過清晰的設計增強使用者的點選識別能力，從而提高網站的互動性。雖然偏離傳統連結設計以增強可點選性是可行的，但過度偏離會引發使用者困惑，適得其反。